<template>
  <page-view class="flex-column">
    <title-bar :show-back="true" @back="$router.back()">购物车列表</title-bar>
    <div class="content-box flex-1">
      <div class="wrapper" ref="wrapper">
        <div class="content">
          <swipe-cell v-for="item in shopCartList" :key="item.id">
            <template #content>
              <div class="shop-cart-item flex-row">
                <div class="left">
                  <img v-lazy="baseURL + item.foodInfo.food_img" alt="">
                </div>
                <div class="center flex-1 flex-column j-s-a">
                  <div class="food-name">{{ item.foodInfo.food_name }}</div>
                  <div class="text-second price">￥ {{ item.foodInfo.price }}</div>
                </div>
                <div class="right flex-row a-c j-s-a">
                  <span class="iconfont iconjianqu text-primary" @click="item.count--;subFoodCount(item.fid)" v-if="item.count > 0"></span>
                  <span>{{item.count}}</span>
                  <span class="iconfont icontianjia1 text-primary" @click="item.count++;addFoodCount(item.fid)"></span>
                </div>
              </div>
            </template>
            <button type="button" class="btn-delete" @click="confirmDelete(item.id)">不要了</button>
          </swipe-cell>
          <p v-if="pageIndex == pageCount && isLoading == false" class="tips">--我是有底线的--</p>
          <loading-box v-if="isLoading"></loading-box>
        </div>
      </div>
    </div>
    <shop-cart-bar ref="shopCartBar" @click="isShowAddressBox=true"></shop-cart-bar>
    <transition enter-active-class="animate__animated animate__fadeIn",
    leave-active-class="animate__animated animate__fadeOut">
      <div class="address-box" v-show="isShowAddressBox">
        <label class="address-item flex-row" v-for="(item) in addressInfoList" :key="item.id">
          <div class="right flex-row a-c j-c">
            <input type="radio" v-model="aid" :value="item.id" style="display: none">
            <span class="iconfont iconcheck-circle-fill" :style="{color:aid==item.id?'#008de1':'#cccccc'}"></span>
          </div>
          <div class="left flex-1">
            <div class="flex-row a-c">
              <div class="person-name">{{item.person_name}}</div>
              <div class="user_phone">{{item.phone}}</div>
            </div>
            <div class="flex-row a-c" style="margin-top: 0.05rem">
              <div class="tag flex-row j-c">{{item.tag}}</div>
              <div class="address-text">
                {{item.address}}
              </div>
            </div>
          </div>
        </label>
        <button class="btn">提交订单</button>
        <span class="iconfont iconclose-circle-fill" @click="isShowAddressBox=false"></span>
      </div>
    </transition>
  </page-view>
</template>

<script>
import Api from "@/utils/Api";
import LoadingBox from "@/components/loading-box";
import BScorll from "better-scroll";
import ShopCartBar from "@/components/shop-cart-bar";

export default {
  name: "shopCartList",
  components: {ShopCartBar, LoadingBox},
  data() {
    return {
      shopCartList: [],
      pageCount: 0,
      pageEnd: 0,
      pageStart: 1,
      pageIndex: 1,
      totalCount: 0,
      isLoading: false,
      scroll:null,
      addressInfoList:[],
      aid:null,
      isShowAddressBox:false
    }
  },
  methods: {
    async getShopCartList(pageIndex = 1) {
      this.isLoading = true;
      let results = await Api.shopCart.getListByPage({pageIndex});
      this.shopCartList = results.listData;
      this.pageCount = results.pageCount;
      this.pageStart = results.pageStart;
      this.pageEnd = results.pageEnd;
      this.pageIndex = results.pageIndex;
      this.totalCount = results.totalCount;
      this.isLoading = false;
    },
    setBetterScroll() {
      if(!this.scroll){
        this.$nextTick(()=>{
          this.scroll = new BScorll(this.$refs.wrapper,{
            click:true,
            pullUpLoad:true
          });
          this.scroll.on("pullingUp",async ()=>{
            if (this.pageIndex < this.pageCount && this.isLoading == false){
              let newIndex = +this.pageIndex + 1;
              await this.getShopCartList(newIndex);
              this.scroll.finishPullUp();
            }else {
              this.scroll.finishPullUp();
            }
          })
        })
      }
      else {
        this.$nextTick(()=>{
          this.scroll.refresh();
        })
      }
    },
    async addFoodCount(fid){
      await Api.shopCart.addToShopCart({fid,count:1});
      this.$refs.shopCartBar.getMyShopCartTotalInfo();
    },
    async subFoodCount(fid){
      await Api.shopCart.addToShopCart({fid,count:-1});
      this.$refs.shopCartBar.getMyShopCartTotalInfo();
    },
    confirmDelete(id){
      this.showActionSheet({
        menuList:["你确定要删除吗"],
        callBack: async (index) => {
          if (index == 0){
            await Api.shopCart.deleteMyShopCartFoodById(id);
            // 在原有的列表里面删除这一项
            let i = this.shopCartList.findIndex(item => item.id == id);
            if (i != -1){
              this.shopCartList.splice(i,1);
            }
            // 刷新shopCartBar的数据
            this.$refs.shopCartBar.getMyShopCartTotalInfo();
          }
        }
      })
    },
    async getMyAddressInfoList() {
      let results = await Api.addressInfo.getMyAddressInfoList();
      this.addressInfoList = results;
    }
  },
  created() {
    this.getShopCartList();
    this.getMyAddressInfoList();
  },

  updated() {
    this.setBetterScroll();
  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/com.scss";
.wrapper{
  height: 100%;
  overflow: hidden;
  @include md-box(){
    &{
      overflow: auto;
    }
  }
}
.shop-cart-item {
  height: 0.7rem;
  box-sizing: border-box;
  padding: 0.02rem 0.03rem;
  border-bottom: 1px solid #ececec;

  .left {
    width: 0.9rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .center {
    margin-left: 0.03rem;

    .food-name {
      font-size: 0.18rem;
      font-weight: bold;
    }

    .price {
      font-size: 0.12rem;
    }
  }

  .right {
    width: 0.9rem;
    //border: 1px solid red;
    font-size: 0.14rem;

    .iconfont {
      font-size: 0.22rem;
      font-weight: bold;
    }
  }
}

.btn-delete {
  border: none;
  outline: none;
  font-size: 0.14rem;
}

::v-deep .cell-content {
  padding: 0 !important;
}
.tips{
  text-align: center;
  font-size: 0.14rem;
  color: gray;
  padding: 0.05rem;
}
.address-box{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.6);
  box-sizing: border-box;
  padding: 0.05rem;
  .btn{
    width: 100%;
    height: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $primaryColor;
    color: white;
    margin-top: 0.05rem;
    border: none;
    outline: none;
    border-radius: 0.05rem;
  }
  .address-item{
    background-color: white;
    box-sizing: border-box;
    padding: 0.05rem;
    border-bottom: 2px solid #eeeeee;
    .left{
      .person-name{
        font-weight: bold;
        font-size: 0.16rem;
      }
      .user_phone{
        font-size: 0.13rem;
        color: #333333;
        margin-left: 0.05rem;
      }
      .tag{
        background-color: orangered;
        color: white;
        font-weight: bold;
        min-width: 0.4rem;
        font-size: 0.13rem;
        padding: 0.02rem;
      }
      .address-text{
        color: gray;
        font-size: 0.12rem;
        margin-left: 0.05rem;
      }
    }
    .right{
      width: 0.6rem;
      .iconfont{
        font-size: 0.18rem;
      }
    }
  }
}
.iconclose-circle-fill{
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  font-size: 0.25rem;
}
</style>